<template>
	<view>
		<view style="width: 750rpx;height: 1rpx;background-color: #D8D8D8;"></view>
		<view style="width: 750rpx;height: 400rpx;position: relative;">
			<textarea style="width: 670rpx;height: 294rpx;margin-left: 30rpx;margin-top: 40rpx;font-size: 34rpx;" placeholder="*请输入隐患整改详情…" placeholder-style="color:#CCCCCC;font-size:34rpx" @input="inputs" maxlength="200" v-model="dateinfo"></textarea>
			<view style="bottom: 40rpx;right: 30rpx;font-size: 24rpx;position: absolute;color: #999999;">{{start}}/200</view>
			<view style="width: 720rpx;height: 1rpx;margin-left: 30rpx;bottom: 0;position: absolute;background-color: #E5E5E5;"></view>
		</view>
		<view>
			<view style="font-size: 34rpx;line-height: 34rpx;margin-top: 40rpx;margin-left: 30rpx;">可上传照片(1-4张)</view>
			<!-- <view style="margin-left: 30rpx;margin-top:20rpx;padding-right: 10rpx;">
				<uni-file-picker
					v-model="imgArr"  
					file-mediatype="image"
					mode="grid"
					:limit="4"
					@progress="progress" 
					@success="success" 
					@fail="fail" 
					@select="select"
					@delete="deletess"
				/>
				
			</view> -->
			<view>
				<view style="width: 150rpx;height: 150rpx;background-color: #F5F5F8;margin-top: 30rpx;margin-left: 30rpx;border-radius: 8rpx;" v-if="imgArr.length==0">
					<image src="../../static/btn_takephoto@3x.png" style="width: 88rpx;height: 88rpx;margin-top: 31rpx;margin-left: 31rpx;" @click="uploadImg()" ></image>
				</view>
				<view v-else style="margin-left: 10rpx;display: flex;">
					<view class="qqq" style="width:150rpx;height: 150rpx ;display: inline-block; position: relative;margin-left: 20rpx;margin-top: 30rpx;" v-for="(item,index) in imgArr" :key="item">
						<image  :src="item" style="width: 150rpx;height: 150rpx; position: absolute;border-radius: 8rpx;" :key="item" @click="openImg(item)"></image>
						
						<image  src="../../static/btn_delete@3x.png" style="position: absolute;width: 40rpx;height: 40rpx;right: -20rpx;top: -20rpx;" @click="deleImg(item,index)"></image>
					</view>	
					<view style="width: 150rpx;height: 150rpx;background-color: #F5F5F8;margin-top: 30rpx;margin-left: 30rpx;border-radius: 8rpx;" v-if="imgArr.length<4 && imgArr.length!=0">
						<image src="../../static/btn_takephoto@3x.png" style="width: 88rpx;height: 88rpx;margin-top: 31rpx;margin-left: 31rpx;" @click="uploadImg()" ></image>
					</view>	
				</view>	
			</view>
		</view>
		<view style="width: 750rpx;height: 120rpx; position: fixed;bottom: 0;border-top: 1prx solid #E5E5E5;" v-if="start==0||imgArr.length==0">
			<button style="background-color: rgba(81, 154, 255, 0.29);color: #FFFFFF;width: 690rpx;height: 94rpx;border-radius: 47rpx;font-size: 36rpx;margin-left: 32rpx;margin-top: 14rpx;" disabled="true">提交整改</button>
		</view>
		<view style="width: 750rpx;height: 120rpx; position: fixed;bottom: 0;border-top: 1prx solid #E5E5E5;" v-else>
			<button style="background-color: rgba(81, 154, 255, 1);color: #FFFFFF;width: 690rpx;height: 94rpx;border-radius: 47rpx;font-size: 36rpx;margin-left: 32rpx;margin-top: 14rpx;" @click="finish()">提交整改</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				start:0,
				dateinfo:'',
				imgArr:[],
				riskId:'',
				userId:'',
				ownerId:'',
				repair:'',
				count:'',
				createTime:'',
				answerId:'',
				userName:'',
				tokenUser:''
			}
		},
		methods: {
			select(e){
				console.log(this.$refs.gg,'this.$refs.gg');
				// let filePath = e.tempFilePaths[0]
				console.log(filePath);
				
			    // console.log('选择文件：',e)
				// this.imgArr.push(...e.tempFilePaths)
				
				
				
			},
			inputs(){
				let tetVal=this.dateinfo.length
				this.start=tetVal
				
			},
			uploadImg(){
				let that = this
				uni.chooseImage({
					count:4,
					success(res) {
						
						console.log(that.imgArr.length);
						// that.imgArr.push(res.tempFilePaths);
						res.tempFilePaths.map(e=>{
					uni.uploadFile({
							 url: 'https://project.develop.lanchengiot.cn/project_flood/v1/public/upload/mark/image', //仅为示例，非真实的接口地址
								filePath: e,
								name: 'file',
								formData: {
									'user': 'test'
								},
								success: (res) => {
									console.log(JSON.parse(res.data).data.url,'8989');
									let url = JSON.parse(res.data).data.url
									 
											that.imgArr.push(url)
										
										console.log(url,'上传的图片');
								}
					})
				})
						console.log(that.imgArr);
					}
					
				})
			},
			deleImg(item,index){
				console.log(index);
				console.log(JSON.stringify(this.imgArr))
				this.imgArr.splice(index,1)
				console.log(JSON.stringify(this.imgArr))
			},
			goBack(){
				uni.navigateTo({
					url:`../FXducha/YHrecord?id=${this.ownerId}`
				})
			},
			finish(){
				let data = {
					riskId: this.riskId,
					images:this.imgArr,
					remark:this.dateinfo,
					userId:this.userId
				}
				uni.request({
					url:'https://project.develop.lanchengiot.cn/project_flood/v1/check/repair/create',
					data:data,
					header:{"Authorization" : this.tokenUser},
					method:'POST',
				}).then((res)=>{
					console.log(res);
					this.count=res.data.data.count
					})
				console.log(data,'kkk');
				uni.showToast({
					title:`整改成功！`,
					icon:'none'
				}).then((res)=>{
					setTimeout(()=>{
						if(this.real==1){
							uni.navigateBack({
							    delta: 1
							});
						}else{
							uni.redirectTo({
								url:`YWCzhengG?ownerId=${this.ownerId}&tiao=${1}&repair=${this.repair}`
							})
						}
						
					},1000)
					
				})
				
				
			},
			openImg(e){
				console.log(e);
				let imgsArray = [];
				imgsArray[0] = e
				uni.previewImage({
				current: 0,
				urls: imgsArray
				});
			}
		},
		onLoad(options) {
			console.log(options);
			this.riskId=options.id;
			this.real=options.real
			this.repair=options.repair
			this.ownerId=options.ownerId
			this.createTime=options.createTime
			this.userName=options.userName
			this.count=options.count
			this.anwserId=options.anwserId
			try {
			    const userId = uni.getStorageSync('userId');
				this.userId=userId
			    if (Y) {
			        // console.log(Y);
			    }
			} catch (e) {
			    // error
			};
			try {
			    const X = uni.getStorageSync('tokenUser');
				this.tokenUser=X
			    if (X) {
			        // console.log(Y);
			    }
			} catch (e) {
			    // error
			};
		}
	}
</script>

<style>

</style>
